<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner_2" v-for="item in banner">
				<img :src="item.src" alt="" />
				<p ref='a'>{{ item.desc }}</p>
			</div>
			<div class="content">
				<nav-v></nav-v>
				<consult-v></consult-v>
				<div class="newsList">
					<div class="title"><p>新闻动态</p><em></em></div>
					<div class="con">
						<div class="tab">
							<a href="javascript:;" @click="news" :class="{ active : list_1 }">墙绘百科</a>
							<a href="javascript:;" @click="news" :class="{ active : list_2 }">行业动态</a>
							<a href="javascript:;" @click="news" :class="{ active : list_3 }">企业动态</a>
						</div>
						<div>
							<transition name="vux-pop-in">  
								<div v-if="list_1" class="newBox">
									<panel :list="list" :type="type"></panel>
								</div>
							</transition>  
							
							<transition name="vux-pop-in">  
								<div v-if="list_2" class="newBox">
									<panel :list="list2" :type="type"></panel>
								</div>
							</transition>  
							
							<transition name="vux-pop-in">  
								<div v-if="list_3" class="newBox">
									<panel :list="list3" :type="type"></panel>
								</div>
							</transition>  
						</div>
					</div>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import consult from '../public/consult'
import nav from '../public/nav'
import towBanner from '../../assets/towBanner.jpg'
import newsList1 from '../../assets/newsList1.jpg'
import newsList2 from '../../assets/newsList2.jpg'
import newsList3 from '../../assets/newsList3.jpg'
import newsList4 from '../../assets/newsList4.jpg'
import newsList5 from '../../assets/newsList5.jpg'
import newsList6 from '../../assets/newsList6.jpg'
import newsList7 from '../../assets/newsList7.jpg'
import newsList8 from '../../assets/newsList8.jpg'
import newsList9 from '../../assets/newsList9.jpg'
import newsList10 from '../../assets/newsList10.jpg'
import newsList11 from '../../assets/newsList11.jpg'

import { Panel } from 'vux'
export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	consultV : consult,
  	navV : nav, Panel
  },
  data () {
    return {
    	banner : [
    		{src : towBanner,desc : '—— 打造时尚有品位的家居生活和人文环境。'}
    	],
    	list_1 : true, list_2 : false, list_3 : false, type : '1',
    	list: [
    		{
		       src: newsList1,
		       title: '如何选择一个专业的墙绘公司？',
		       desc: "2016-12-29   阅读: 10366",
		       url : '/newsMsg'
		    }, 
		    {
		       src: newsList2,
		       title: '墙绘材料的介绍',
		       desc: '2016-12-24    阅读: 4530',
		       url : '/newsMsg'
		    },
		    {
		       src: newsList3,
		       title: '墙绘价格|墙绘多少钱一平？',
		       desc: '2016-12-24    阅读: 14426',
		       url : '/newsMsg'
		    },
		    {
		       src: newsList4,
		       title: '什么是墙绘？',
		       desc: '2016-12-24  阅读: 2188',
		       url : '/newsMsg'
		    },
		    {
		       src: newsList5,
		       title: '墙绘潮流',
		       desc: '2016-10-20  阅读: 3691',
		       url : '/newsMsg'
		    }
      	],
      	list2: [
    		{ 
		        src: newsList6,
		        title: '成都一停车场石墩被涂鸦 变身各种动物头像',
		        desc: '2016-10-20   	  阅读: 2755',
		       	url : '/newsMsg'
		    }, 
		    {
		        src: newsList7,
		        title: '当创意涂鸦遇见工农村 德阳地标秒变“萌萌哒”',
		        desc: '2016-10-14   阅读: 1405',
		      	url : '/newsMsg'
		    },
		    {
		        src: newsList8,
		        title: '不一样的看房体验，手绘3D样板间',
		        desc: '2016-10-11   阅读: 1050',
		       	url : '/newsMsg'
		    },
		    {
		        src: newsList9,
		        title: '六成业主爱上手绘墙饰',
		        desc: '2016-10-10  阅读: 5638',
		      	url : '/newsMsg'
		    },
		    {
		        src: newsList10,
		        title: '乡村游成国庆“香饽饽” 每天上万游客踏足3D彩绘村\n',
		        desc: '2016-10-08  阅读: 3410',
		       	url : '/newsMsg'
		    }
      	],
      	list3 : [
      		{
      			src: newsList11,
		     	title: '北京非鱼墙绘品牌网站全新上线',
		       	desc: '2016-11-01    阅读: 2401',	
		       	url : '/newsMsg'
      		},
      		{
      			src: newsList11,
		     	title: '北京非鱼墙绘品牌网站全新上线',
		       	desc: '2016-11-01    阅读: 2401',	
		       	url : '/newsMsg'
      		},
      		{
      			src: newsList11,
		     	title: '北京非鱼墙绘品牌网站全新上线',
		       	desc: '2016-11-01    阅读: 2401',	
		       	url : '/newsMsg'
      		},
      		{
      			src: newsList11,
		     	title: '北京非鱼墙绘品牌网站全新上线',
		       	desc: '2016-11-01    阅读: 2401',	
		       	url : '/newsMsg'
      		}
      	]
    }
  },
  methods : {
  	news (ev){
  		if(ev.target.innerHTML == '墙绘百科'){
  			this.list_1 = true; this.list_2 = false; this.list_3 = false;
  		}else if(ev.target.innerHTML == '行业动态'){
  			this.list_1 = false; this.list_2 = true; this.list_3 = false;
  		}else{
  			this.list_1 = false; this.list_2 = false; this.list_3 = true;
  		}
  	}
  },
  mounted () {
  	setTimeout(()=>{	
  		this.$refs.a[0].style.right="0"
  	},300)
  }
}

</script>

<style type="text/css" scoped>
	/* newsList.style */

	.content .title{
		width:55% !important; margin: 0 auto; position: relative; border-bottom: 0.02rem solid #ccc;  margin-bottom: 0.3rem;  padding-top: 0.2rem;
	}
	.content .title p{
		font-size: 0.24rem; width: 60%; margin: 0 auto; text-align: center; line-height: 0.7rem;
	}
	.content .title em{
		width: 40%; height: 0.02rem; background: #F54F36; position: absolute; left: 30%;
	}
	
	.newsList {
		padding-bottom:0.1rem;
	}
	.newsList .tab a{
		color: #888; line-height: 0.4rem; margin-left: 0.15rem; font-size: 0.14rem;
	}
	.newsList .tab .active{
		color: #39a9e8;
	}
	.newsList .con{
		width: 100%; height: 5.6rem; overflow: hidden;
	}
</style>
<style type="text/css">
	.banner_2{
		position: relative;
	}
	.banner_2 img{
		width: 100%; height: 0.9rem;
	}
	.banner_2 p{
		color: #fff; position: absolute; top: 0.6rem; right: -22rem; -webkit-transition: 0.2s; transition: 0.5s;
	}
	
	.newsList .weui-media-box__hd{
		width: 0.6rem !important; height: 0.6rem !important; line-height: 0.6rem !important; margin-right:0.08rem !important;
	}
	.newsList .weui-media-box{
		border-bottom: 0.01rem solid #dcdcdc; padding: 0.15rem !important;
	}
	.newsList .weui-media-box__bd h4{
		font-size: 0.16rem; color: #333; text-overflow:inherit; white-space: inherit;
	}
	.newsList .weui-media-box__bd p{
		font-size: 0.13rem; color: #999; line-height: 0.25rem;
	}

</style>
